import { DataTableColumn } from "@/components/common/full-table";
import TooltipIconBtn from "@/components/common/tooltip-icon-btn.vue";
import { NSpace, NSwitch } from "naive-ui";

export const useTable = (
  handleUpdateStauts: Function,
  handlePerms: Function,
  handleEdit: Function,
  handleDelete: Function
) => {
  const columns: DataTableColumn<Role>[] = [
    {
      title: "序号",
      key: "no",
      width: 60,
      fixed: "left",
      align: "center",
      render(_, index) {
        return index + 1;
      },
    },
    {
      title: "名称",
      key: "name",
      width: 120,
      ellipsis: { tooltip: true },
    },
    {
      title: "标识",
      key: "code",
      width: 120,
      ellipsis: { tooltip: true },
    },
    {
      title: "状态",
      key: "status",
      width: 120,
      ellipsis: { tooltip: true },
      render(row) {
        return (
          <NSwitch
            value={row.status}
            onUpdateValue={async (status: boolean) => {
              if (await handleUpdateStauts(row, status)) {
                row.status = status;
              }
            }}
          >
            {{
              checked: () => "启用",
              unchecked: () => "停用",
            }}
          </NSwitch>
        );
      },
    },
    {
      title: "描述",
      key: "remark",
      width: 200,
      ellipsis: { tooltip: true },
    },
    {
      title: "创建时间",
      key: "createTime",
      width: 150,
      ellipsis: { tooltip: true },
    },
    {
      title: "操作",
      key: "actions",
      width: 120,
      align: "center",
      fixed: "right",
      lock: true,
      render(row) {
        return (
          <NSpace justify="space-around" align="center">
            <TooltipIconBtn
              icon="mdi:key-variant"
              tip="菜单权限"
              onClickEvent={() => handlePerms(row)}
            />
            <TooltipIconBtn
              icon="mdi:text-box-edit"
              tip="编辑"
              onClickEvent={() => handleEdit(row)}
            />
            <TooltipIconBtn
              icon="mdi:delete-forever"
              tip="删除"
              onClickEvent={() => handleDelete(row)}
            />
          </NSpace>
        );
      },
    },
  ];

  return { columns };
};
